<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中使用插槽（slot)</title>
  <script src="vue.js"></script>
</head>
<body>
<!--slot另一种用法  具名插槽（父组件把插入到子组件的内容用slot="名字"分别起不同的名字-->
<!--具名插槽  在子组件slot中起一个名字（name）  name="header"name="footer"
相对应的父组件所要传递的标签内加入slot="header"-->
<!--说法：子组件需要从外部接受两个插入的内容，一部分内容名字是name="header"，name="footer"，父组件调用子组件的时候恰好一个插入了名字叫header的插槽-->
<!--DOM的内容，一个恰好插入了名字叫footer的插槽DOM的内容-->

<div id="app">
    <body_content>
      <div class="header" slot="header">header</div>
      <div class="footer" slot="footer">footer</div>
    </body_content>
</div>
<script>
  Vue.component('body_content',{
     template:`<div>
         <slot name="header"></slot>
         <div class="content">content</div>
         <slot name="footer" ></slot>
     </div>`
  })
  var vm=new Vue({
    el:"#app"
  })
</script>
</body>
</html>
